<template>
    <el-dialog
        title="数据过滤"  v-dialogDrag :visible.sync="dialogVisible" width="80%" :before-close="handleCloseFilterDialog">
        <div class="filter-section">
            <div class="section-header">
                <i class="el-icon-finished"></i>
                <span class="section-title">筛选条件</span>
            </div>
            <el-form ref="menuForm" label-width="90px" size="small" :model="filterForm" inline>
            <el-form-item label="测点选择" >
              <el-select v-model="filterForm.codeID" placeholder="请选择" @change="handleChangeFilterSelect">
                <el-option
                  v-for="item in filterSelectList"
                  :key="item.id"
                  :label="item.pointName"
                  :value="item.codeID"
                  >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="filterForm.begin"
                type="date"
                format="yyyy年MM月dd日"
                value-format="yyyy/MM/dd"
                placeholder="选择日期">
              </el-date-picker>
              <span class="range">至</span>
              <el-date-picker
                v-model="filterForm.end"
                type="date"
                format="yyyy年MM月dd日"
                value-format="yyyy/MM/dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="数值范围">
              <el-input-number 
                v-model="filterForm.min" 
                placeholder="最小值" 
                controls-position="right"
                :precision="3"
                style="width: 160px"
              ></el-input-number>
              <span class="range">至</span>
              <el-input-number 
                v-model="filterForm.max" 
                placeholder="最大值" 
                controls-position="right"
                :precision="3"
                style="width: 160px"
              ></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="handleSearchFilterData" icon="el-icon-search">查询数据</el-button>
            </el-form-item>
        </el-form> 
        </div>
        <div class="section-header">
            <i class="el-icon-tickets"></i>
            <span class="section-title">数据列表</span>
        </div>
        <div style="width:100%; overflow-x: auto;">
            <div class="table-tips" v-if="tableData.length > 0">📝数据审核功能已启用。现支持通过右键点击数据表格中的单元格，唤出操作菜单，执行审核相关操作。</div>

            <tableView tableHeight="400px" :tableList="tableData" :tableComPs="tableTitle"  v-if="tableData.length > 0" @updateValue="handleUpdateValue" :showRoleCheck="1" isChartFilter @tableDataHide="tableDataHide"/>
            <noData showData v-if="tableData.length == 0" />
          </div>
      </el-dialog>
</template>
<script>
import {getPointData,lineInfOGetOT,updateValue,delDataOnLine} from "@/api/https";
import TableView from '@/components/page/information/TableView.vue';
import noData from '../../base/noData.vue'
export default ({
    components:{TableView,noData},
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        filterSelectList:{
            type:Array,
            default:()=>{
                return []
            }
        },
        lineID:{
            type:Number,
            default:0
        },
    },
    mounted(){
        
    },
    beforeDestroy(){
        this.handleCloseFilterDialog()
    },
    watch: {
        visible(newVal) {
            if(newVal){
                this.dialogVisible = newVal
            }
        },
        dialogVisible(newVal) {
            this.$emit('update:visible', newVal)
        },
    },
    data() {
        return {
            dialogVisible:this.visible,
            filterForm:{},
            codeID:'',
            tableTitle:{},
            tableData:[],
            taleLoading:false
        }
    },
    methods:{
        handleChangeFilterSelect(val){
            this.codeID = val
            lineInfOGetOT({
                lineID:this.filterSelectList[0].lineID,
                codeID:val
            }).then(res=>{
                if(res.isSuccess){
                    this.filterForm = {...res.data}
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        handleCloseFilterDialog(){
            this.dialogVisible = false
            this.tableData = []
            this.tableTitle = {}
            this.filterForm = {}
        },
        handleSearchFilterData(){
            this.taleLoading = true
            getPointData({
                lineID:this.filterSelectList[0].lineID,
                codeID:this.codeID,
                outliersigNs:[0,1,2,3],
                treatmentresulTs:this.filterForm.treatmentresulTs,
                begin:this.filterForm.begin || '',
                end:this.filterForm.end || '', 
                max:this.filterForm.max || '',
                min:this.filterForm.min || ''
            }).then(res=>{
                if(res.isSuccess){
                    const _list = []
                    this.tableTitle = res.data.comPs
                    if(res.data.node && res.data.node.length > 0){
                        res.data.node.forEach((item,index)=>{
                            const data = {
                                codE_ID:item.codE_ID,
                                id:item.id,
                                number:item.number,
                                outliersign:item.outliersign,
                                pointName:item.pointName,
                                recordUser:item.recordUser,
                                remark:item.remark,
                                treatmentUser:item.treatmentUser,
                                watchTime:item.watchTime,
                                measuresStatus:item.measuresStatus,
                                lineVl:item.lineVl
                            }
                            item.comPs_1.forEach((subItem,subIndex)=>{
                                data[subItem] = item.comPs[subIndex]
                                data[subItem + 'state'] = item.comP_outs[subIndex]
                            })
                            _list.push(data)
                        })
                    }
                    this.tableData = _list
                    this.taleLoading = false
                }else{
                    this.$message.error(res.errorMessage)
                    this.taleLoading = false
                }
            })
        },
        handleUpdateValue(data){
            updateValue(data).then(res=>{
                if(res.isSuccess && res.data && res.data.length > 0){
                        let err = []
                        let success = []
                        let message = ''
                        res.data.forEach(item=>{
                            if(item.rn){
                                success.push(item.id)
                            }else{
                                err.push(item.mess)
                                message += `<p style="line-height:30px">${item.mess}</p>`
                            }
                        })
                        if(err.length > 0){
                            this.$message({
                                type:'error',
                                dangerouslyUseHTMLString: true,
                                message: message
                            });
                        }
                        if(success.length > 0){
                            this.tableTitle = []
                            this.tableData = []
                            this.handleSearchFilterData();
                        }
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        },
        tableDataHide(data){
            delDataOnLine({
                ID:0,
                codeID:data.codE_ID,
                WATCHTIME:data.watchTime,
                lineID:this.lineID,
                val:data.lineVl
            }).then(res=>{  
                if(res.isSuccess){
                    const index = this.tableData.findIndex(item =>{return item.codE_ID == data.codE_ID})
                    if(index > -1){
                        this.tableData.splice(index,1)
                    }
                }else{
                    this.$message.error(res.errorMessage)
                }
            })
        }
        
    }
})
</script>
<style scoped lang="scss">
.filter-section {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    
    
}
.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    
    .section-title {
        font-weight: 600;
        color: #303133;
        margin-left: 8px;
    }
    
}
.range{
    padding:0 10px;
}
</style>